<script>

import {mapGetters} from "vuex";

export default {
  name: "roleDialog",
  props: {
    /* 父组件传递过来的prop用于控制组件的显示和隐藏 */
    roleVisible: {
      type: Boolean,
      default: false
    },
    /* 父组件传递过来的prop分页参数 */
    pagePrams: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    /* 验证角色名称的自定义校验函数 */
    const validateName = (rule, value, callback) => {
      let role = null
      role = this.formData.id ? this.roleList.filter(item => item.id !== this.formData.id).find(item => item.name === value) : this.roleList.find(item => item.name === value)
      role ? callback(new Error(`您输入的角色名称${value}已经存在`)) : callback()
    }
    return {
      /* 表单数据对象 */
      formData: {
        name: '',// 角色的名称
        description: '',// 角色的描述
      },
      /* 表单规则对象 */
      formRules: {
        name: [
          {required: true, message: '请输入角色名称', trigger: 'blur'},
          {validator: validateName, trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入角色描述', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    /* doAddRole()函数的作用(用于派发action去做添加一个角色的请求) */
    async doAddRole() {
      try {
        // 调用addRole()派发一个action携带当前表单的角色信息，去发送请求添加一个角色
        const message = await this.$store.dispatch('settingsStore/addRole', this.formData)
        // 添加数据式，如果当前页数据已经满了，则跳转到后一页(此时能看到最新添加的那条数据)
        if (this.total % this.pagePrams.pagesize === 0) this.total++
        // this.pagePrams.page = Math.ceil(this.total / this.pagePrams.pagesize)
        this.$emit('changePage', Math.ceil(this.total / this.pagePrams.pagesize))
        // 调用fetchRoleList()派发action发送请求重新获取角色列表
        this.$store.dispatch('settingsStore/fetchRoleList', this.pagePrams)
        // 提示用户角色新增成功
        this.$message.success(message)
        // 关闭对话框组件
        this.$emit('update:roleVisible', false)
      } catch (error) {
        // 提示用户角色添加失败
        this.$message.error(error.message)
      }
    },
    /*  doEditRole()函数的作用(用于派发action去做编辑一个角色的请求) */
    async doEditRole() {
      try {
        // 调用updateRole()派发一个action携带当前表单的角色信息，去发送请求更新一个角色
        const message = await this.$store.dispatch('settingsStore/updateRole', this.formData)
        // 调用fetchRoleList()派发action发送请求重新获取角色列表
        await this.$store.dispatch('settingsStore/fetchRoleList', this.pagePrams)
        // 提示用户角色更新成功
        this.$message.success(message)
        // 关闭对话框组件
        this.$emit('update:roleVisible', false)
      } catch (error) {
        // 提示用户角色更新失败
        this.$message.error(error.message)
      }
    },
    /*findRoleDetail()函数的作用(用于派发action发送请求获取角色详情)*/
    async findRoleDetail(id) {
      // 调用findRole()传入当前的角色ID派发action发送请求获取角色详情
      const role = await this.$store.dispatch('settingsStore/findRole', id)
      // 数据回显
      this.formData = role
    },

    /*findRoleDetail(role) {
      // 数据回显(进行深拷贝)
      this.formData = JSON.parse(JSON.stringify(role))
    },*/
    /* 清空表单残留数据和表单校验项的回调函数 */
    clearForm() {
      setTimeout(() => {
        this.$refs.form.resetFields()
        this.formData = {name: '', description: ''}
      }, 500)
    },
    /* 对话框关闭时的回调函数 */
    handleClose() {
      // 对话框组件关闭的时候调用clearForm()函数清空表单数据和移除校验项
      this.clearForm()
      // 关闭对话框组件
      this.$emit('update:roleVisible', false)
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      /* 调用validate()对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise */
      const valid = await this.$refs.form.validate().catch(error => error)
      // 校验失败则return出去不执行下面的逻辑
      if (!valid) return
      // 如果有ID则证明当前是编辑状态(doEditRole())
      if (this.formData.id) {
        this.doEditRole()
      } else {
        // 如果没有ID则证明当前是添加状态(调用doAddRole())
        this.doAddRole()
      }
    },
    /* 点击取消按钮的回调函数 */
    handleCancel() {
      this.$emit('update:roleVisible', false)
    },
  },
  computed: {
    ...mapGetters('settingsStore', ['roleList']),
    /*总共的数据条数  */
    total: {
      get() {
        return this.$store.getters["settingsStore/total"]
      },
      set(newValue) {
        this.$store.commit('settingsStore/addTotal', newValue)
      }
    },
    /* 根据角色的id计算出对话框的标题 */
    title() {
      return this.formData.id ? '编辑角色' : '添加角色'
    }
  }
}
</script>

<template>
  <el-dialog v-bind="$attrs" :title="title" :visible="roleVisible" @close="handleClose">
    <el-form label-width="100px" ref="form" :model="formData" :rules="formRules">
      <el-form-item label="角色名称" prop="name">
        <el-input placeholder="请输入角色的名称" v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input type="textarea" placeholder="请输入角色的描述" resize="none" rows="4" v-model="formData.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="danger" @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </template>
  </el-dialog>
</template>

